<template>
	<view>
		<u-sticky>
			<view class="totalBox">
				<view>
					<!-- 					<u-icon name="calendar" color="#959595" size="42" label-size="26" label-color="#959595"></u-icon>
					<view class="dateShowView" @click="dateShow = true">{{startDate}}~{{endDate}}</view> -->
					<view class="filterTimeBox flex align-center justify-between">
						<view class="filterBtn">
							<picker mode="date" @change="startDateChange" :value="startDate">
								<view>{{ startDate }}</view>
							</picker>
						</view>
						<view class="line"></view>
						<view class="filterBtn">
							<picker mode="date" @change="endDateChange" :value="endDate">
								<view>{{ endDate }}</view>
							</picker>
						</view>
					</view>
				</view>
				<view @click="typeShow = true">
					<u-icon name="" color="#959595" size="26" :label="typeName" label-size="26" label-color="#959595"
						style="margin-right: 8rpx;"></u-icon>
					<u-icon name="arrow-up" color="#fb4535" size="26" label-size="26" label-color="#959595"
						v-if="typeShow">
					</u-icon>
					<u-icon name="arrow-down" color="#959595" size="26" label-size="26" label-color="#959595"
						v-if="!typeShow"></u-icon>
				</view>
			</view>
		</u-sticky>

		<view class="walletBox">
			<!-- 列表 -->
			<view v-if="walletlist.length > 0">
				<view class="incomelistItem" v-for="(item,index) in walletlist" :key="index">
					<view class="topBox solid-bottom flex align-center justify-between">
						<view class="topLeft">
							{{item.remark}}
						</view>
					</view>
					<view class="subBox flex align-center justify-between">
						<view class="subLeft">
							<view>类型：{{item.log_class}}</view>
							<view>时间：{{item.create_time}}</view>
						</view>
						<view class="subRight" :style="item.money>0?'':'color:#22cc0f'">
							{{item.money>0?'+':''}}{{item.money}}</view>
					</view>
				</view>
			</view>
			<!-- 暂无数据 -->
			<view class="noMachine flex align-center" v-if="walletlist.length == 0 && isLoad">
				<image src="../../static/images/noData/zwjl.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>

		<!-- 日期选择器 -->
		<!-- 		<u-calendar v-model="dateShow" :mode="mode" @change="dateChange" :mask-close-able="false"
			range-bg-color="#fb4535" range-color="#fff" active-bg-color="#fb4535" btn-type="error">
		</u-calendar> -->

		<!-- 类型选择器 -->
		<u-popup v-model="typeShow" mode="bottom" class="typeBox" :closeable="true" close-icon-color="#fff">
			<view class="title">类型选择</view>
			<view class="typeChooseBox">
				<view v-for="(item,index) in typeList" :key="index" @click="typeChooseTab(item.name,item.value)"
					:class="typeName == item.name?'bcColor':''">
					{{typeList[index].name}}
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<toast></toast>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-loadmore :status="status" @loadmore="loadmore" style="padding:0 0 30rpx" v-if="walletlist.length > 0" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow: false,
				typeShow: false,
				mode: 'range',
				startDate: '',
				endDate: '',
				// 筛选类型数组
				typeList: [],
				// 类型字段
				typeName: '全部 ',
				typeSearch: '',

				status: "loadmore",
				noMore: false,
				isLoad: false,

				scrollTop: 0,
				page: 1,
				limit: 12,
				walletlist: [],
				newPageFlag: 0,
				profit: '0.00',
				expenditure: '0.00'
			}
		},
		onLoad() {
			this.getYearMonthDay();
			this.getWalletList()
		},
		onShow() {

		},
		methods: {
			// 获取明细列表
			getWalletList() {
				this.$u.api.walletList({
						cur_page: this.page,
						page_num: this.limit,
						sDate: this.startDate,
						eDate: this.endDate,
						log_class: this.typeSearch,
						pageFlag: this.newPageFlag,
					}).then((res) => {
						if (res.status == 200) {
							var datas = res.result.list;
							if (this.page == 1) {
								this.typeList = res.result.types;
								this.newPageFlag = res.result.pageFlag;
							}
							if (this.page == 1 && datas.length == 0) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page == 1 && datas.length < this.limit) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page > 1 && datas.length < this.limit) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page > 1 && datas.length == this.limit) {
								this.status = "loading";
							}
							this.walletlist = this.walletlist.concat(datas);
						}
						this.isLoad = true;
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			// 交易类型筛选
			typeChooseTab(name, type) {
				this.typeName = name;
				this.typeShow = false;
				this.typeSearch = type;
				this.walletlist = [];
				this.page = 1;
				this.getWalletList()
			},

			//获取当前年月
			getYearMonthDay: function() {
				var timestamp = Date.parse(new Date());
				var date = new Date(timestamp);
				//获取年份
				var Y = date.getFullYear();
				//获取月份
				var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				//获取日期
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				//设置
				this.startDate = Y + '-' + (M - 3 > 10 ? M - 3 : '0' + (M - 3)) + '-' + '01';
				this.endDate = Y + '-' + M + '-' + D;
			},

			// 时间选择变更
			startDateChange(e) {
				this.isLoad = false;
				this.page = 1;
				this.startDate = e.detail.value;
				this.walletlist = [];
				this.status = 'loadmore';
				this.getWalletList();
			},
			endDateChange(e) {
				this.isLoad = false;
				this.page = 1;
				this.endDate = e.detail.value;
				this.walletlist = [];
				this.noMore = false;
				this.status = 'loadmore';
				this.getWalletList();
			},

			// 下拉触底
			onReachBottom() {
				if (this.noMore) {
					this.status = "nomore";
				} else {
					this.status = "loading";
					this.page = ++this.page;
					this.getWalletList();
				}
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.totalBox {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: numberFont;
		background-color: #f8f8f8;
		box-shadow: 0 3rpx 5rpx #e1e1e1;

		view {
			display: flex;
			align-items: center;

			.dateShowView {
				color: #959595;
				margin-left: 20rpx;
			}
		}

		.line {
			margin: 0 20rpx;
			width: 30rpx;
			height: 4rpx;
			background-color: #959595;
		}

		.filterBtn {
			position: relative;
			margin-right: 20rpx;
			color: #959595;
		}

		.filterBtn picker::after {
			content: '';
			position: absolute;
			top: 50%;
			right: -20rpx;
			display: block;
			transform: translateY(-40%);
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 6px solid #959595;
		}
	}

	.walletBox {
		padding: 30rpx;

		.incomelistItem {
			padding: 20rpx 30rpx 28rpx;
			margin-bottom: 30rpx;
			box-shadow: 3rpx 5rpx 10rpx #dddddd;
			border-radius: 10rpx;

			.topBox {
				padding-bottom: 20rpx;

				.topLeft {
					width: 620rpx;
					font-weight: bold;
					font-size: 32rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}

			.subBox {
				padding-top: 20rpx;

				.subLeft {
					view {
						width:100%;
						font-size: 24rpx;
						line-height: 36rpx;
					}
				}

				.subRight {
					font-size: 42rpx;
					color: #fb4535;
					font-family: "numberFont";
				}
			}
		}
	}

	.typeBox {
		padding: 30rpx;
		text-align: center;

		.title {
			background-color: #fb4535;
			padding: 30rpx 0;
			color: #fff;
		}

		.typeChooseBox {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			view {
				width: 28%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				border: 1rpx solid #fb4535;
				border-bottom: 3rpx solid #fb4535 !important;
				border-radius: 14rpx;
				padding: 20rpx 10rpx;
				margin: 20rpx;
				border-bottom: 1rpx solid #f7f7f7;
			}

			.bcColor {
				background-color: #ff8d89;
				color: #fff;
			}
		}


	}
</style>
